import { Component, OnInit } from '@angular/core';
import { FilterType, TransferColumnItem } from '@iux/live/transfer/transfer.interface';
import { cloneDeep as _cloneDeep, uniqueId as _uniqueId } from 'lodash';

@Component({
  selector: 'app-demo1',
  templateUrl: './demo1.component.html',
  styles: [
    `
      .customer-transfer {
        width: 8.12rem;
      }
    `,
  ],
})
export class Demo1Component implements OnInit {
  source: { cols: TransferColumnItem[]; data: any[]; selection: any[] } = {
    cols: [],
    data: [],
    selection: [],
  };
  target: { cols: TransferColumnItem[] } = { cols: [] };

  ngOnInit() {
    this.initColumns();
    this.initData();
  }

  initColumns() {
    const sourceColumns = [
      {
        key: 'id',
        label: 'ID',
        disabled: true, // 是否可以隐藏/显示
        isHidden: true,
        hidden: true, // 列显示隐藏操作项是否显示
      },
      {
        key: 'name',
        label: 'Name',
        disabled: true,
        isHidden: false,
        filterType: FilterType.SEARCH,
      },
      {
        key: 'color',
        label: 'Color',
        width: '100px',
        disabled: false,
        isHidden: false,
      },
      {
        key: 'age',
        label: 'Age',
        disabled: false,
        isHidden: false,
      },
      {
        key: 'random',
        label: 'Random',
        disabled: false,
        isHidden: false,
      },
    ];

    this.source.cols = sourceColumns;
    this.target.cols = _cloneDeep(sourceColumns);
  }

  initData() {
    this.source.data = Array.from({ length: 50 }).map((item, key) => this.initUser(key, key % 4 === 0));

    this.source.selection = [this.source.data[1]];
  }

  initUser(key: number, disabled: boolean) {
    const colors = ['red', 'blue', 'green', 'orange'];
    const temp = {
      id: _uniqueId('uid'),
      key: _uniqueId('uid'),
      name: `user${key}`,
      age: 10 + key,
      expand: false,
      random: parseInt(`${Math.random() * 100}`, 10),
      disabled,
    };
    temp['color'] = colors[temp.random % colors.length];
    return temp;
  }

  stateChange(e) {
    console.log('stateChange:', e);
  }

  change(e) {
    console.log('transferChange:', e);
  }
}
